<template>
  <div @click="menuisShow = !menuisShow">
    <div class="w contents" ref="contents" @touchstart="start" @touchend="end">
      <Loading v-show="this.$store.state.isLoading" />
      <ul class="container">
        <li v-for="(item, index) in bookContent" :key="index">
          <h2>{{ item.title }}</h2>
          <div v-for="(v, i) in item.content" :key="i" v-html="v"></div>
          <van-loading type="spinner" v-show="scrollToNext" />
        </li>
      </ul>
    </div>
    <div class="menu">
      <content-menu
        :show="isshowMenu"
        :title="$route.query.title"
        :currentIndex="currentIndex"
        :menu="menu"
        @clickHide="clickHide"
        @changeChapterIndex="changeChapterIndex"
      ></content-menu>
    </div>
    <content-control
      :title="$route.query.title"
      :show="menuisShow"
      @showMenu="showMenu"
      @goNext="next"
      @goPrev="prev"
    ></content-control>
  </div>
</template>

<script>
import { bookChapterContent, bookChapter } from "@/request/api";
import ContentMenu from "../components/contentMenu.vue";
import ContentControl from "../components/contentControl.vue";
export default {
  name: "NeiRong",
  components: { ContentMenu, ContentControl },
  data() {
    return {
      menuisShow: false,
      isshowMenu: false,
      bookContent: [],
      bookID: "-1",

      menu: [],
      currentIndex: 0,
      scrollToNext: false,
      isShowMulu: false,
    };
  },
  watch: {
    scrollToNext(val) {
      if (val) {
        this.currentIndex += 1;
        this.getContent(this.$route.query.source_uuid, this.menu);
      }
    },
  },
  methods: {
    //点击目录选择章节内容
    changeChapterIndex(index) {
      this.bookContent = [];
      this.currentIndex = index - 0;
      this.getContent(this.$route.query.source_uuid, this.menu);
      this.isshowMenu = false;
    },
    clickHide(val) {
      this.isshowMenu = val;
      this.menuisShow = !val;
    },
    showMenu(val) {
      this.isshowMenu = val;
      this.menuisShow = false;
    },
    clickHideControl() {
      this.menuisShow = false;
    },
    async getContent(source_uuid, menu) {
      let res = await bookChapterContent({
        source_uuid: source_uuid,
        content_uuid: menu[this.currentIndex].secId,
      });
      if (res.code == 0) {
        let data = res.data.content;
        let titleReg = /<h1><span>(.*)<\/span><\/h1>/;
        if (titleReg.test(data)) {
          var title = RegExp.$1;
        }

        let myData = data.replace(titleReg, "");
        // myData = myData.replace(/<.*?>/g, "");//去掉所有标签
        // myData = myData.match(/<p.*?>.+?<\/p>/g);
        myData = myData.match(/<p>((\w|\W)*?)<\/p>/g);
        let content = "";
        if (myData !== null) {
          if (myData[0].replace(/<.*?>/g, "") !== "null") {
            content = myData;
          }
        }
        this.bookContent.push({
          title,
          content,
        });
        this.scrollToNext = false;
      }
    },

    // 下一章
    next() {
      if (this.currentIndex >= this.menu.length - 1) return;
      this.bookContent = [];
      ++this.currentIndex;
      this.getContent(this.$route.query.source_uuid, this.menu);
      this.menuisShow = false;
      document.documentElement.scrollTop = 0;
    },
    //上一章
    prev() {
      if (this.currentIndex == 0) {
        this.$toast({
          message: "这已经是第一章了",
          position: "bottom",
        });
        return;
      }
      this.bookContent = [];
      this.currentIndex--;
      this.getContent(this.$route.query.source_uuid, this.menu);
      this.menuisShow = false;
      document.documentElement.scrollTop = 0;
    },
    scroll() {
      let _dom = this.$refs["contents"];
      if (_dom.scrollHeight - (_dom.scrollTop + _dom.clientHeight) <= 10) {
        this.scrollToNext = true;
      }
    },
    start(e) {
      this.isStartX = e.changedTouches[0].clientX;
      this.isStartY = e.changedTouches[0].clientY;
    },
    end(e) {
      this.endX = e.changedTouches[0].clientX;
      this.endY = e.changedTouches[0].clientY;
      if (
        Math.abs(this.isStartY - this.endY) >
        Math.abs(this.isStartX - this.endX)
      ) {
        this.scroll();
      }
    },
  },
  activated() {},
  created() {
    if (this.bookID != this.$route.query.source_uuid) {
      this.menu = [];
      bookChapter({
        source_uuid: this.$route.query.source_uuid,
      }).then((res) => {
        if (res) {
          if (!res.data) return;
          this.menu = res.data.catalog;
          if (this.$route.query.index) {
            this.changeChapterIndex(this.$route.query.index);
          } else {
            this.getContent(this.$route.query.source_uuid, res.data.catalog);
          }
        }
      });

      this.bookID = this.$route.query.source_uuid;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs["contents"].addEventListener("scroll", this.scroll);
      setTimeout(() => {}, 1000);
    });
  },
  beforeDestroy() {
    this.$refs["contents"].removeEventListener("scroll", this.scroll);
  },

  beforeRouteLeave(to, from, next) {
    next();
  },
};
</script>

<style lang="scss" scoped>
.w {
  width: 100vw;
}
.contents {
  height: 100vh;
  overflow: scroll;
}
.container {
  width: 100%;
  box-sizing: border-box;
}

::v-deep p > img {
  width: 100%;
}
.content {
  padding-bottom: 80px;
}

h2 {
  font-size: 25px;
  margin: 20px 0;
}

::v-deep p {
  font-size: 16px;
  text-align: left;
  margin: 10px 0;
  line-height: 1.5;
  text-indent: 20px;
}
.slide1,
.slide2,
.slide3 {
  height: 100vh;
}
.slide1 {
  background-color: red;
}
.slide2 {
  background-color: green;
}
.slide3 {
  background-color: blue;
}
</style>
